import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:life_service/color/hex.dart';
import 'package:life_service/route/index.dart';
import 'package:life_service/utils/styles.dart';
import 'package:life_service/views/mine/controller.dart';

class MineWalletBillPage extends GetView<MineWalletBillController> {
  const MineWalletBillPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(Get.mediaQuery.padding.top + 44),
        child: AnnotatedRegion<SystemUiOverlayStyle>(
          value: SystemUiOverlayStyle.dark,
          child: Container(
            padding: Get.mediaQuery.padding,
            alignment: Alignment.centerLeft,
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                bottom: BorderSide(
                  color: HexColor(HexColor.colorF2f2),
                ),
              ),
            ),
            child: TextButton(
              onPressed: Get.back,
              child: Text.rich(
                TextSpan(
                  children: [
                    const WidgetSpan(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 18,
                        color: Colors.black,
                      ),
                    ),
                    TextSpan(
                      text: ' 我的钱包',
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16,
                        color: HexColor.color3333,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
      body: CustomScrollView(
        slivers: [
          SliverPadding(
            padding: EdgeInsets.symmetric(
                horizontal: (Get.width - 350) / 2, vertical: 15),
            sliver: SliverToBoxAdapter(
              child: Container(
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(8),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset.zero,
                      blurRadius: 10,
                      spreadRadius: 0,
                      color: HexColor.rgba(204, 204, 204, 0.349019607843137),
                      blurStyle: BlurStyle.outer,
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '可用余额',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize12,
                            color: HexColor.color9999,
                          ),
                        ),
                        TextButton(
                          onPressed: () {
                            Get.toNamed(Routes.mineWalletCard);
                          },
                          child: Text.rich(
                            TextSpan(
                              children: [
                                TextSpan(
                                  text: '我的银行卡 ',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize12,
                                      color: HexColor.colorFfc7),
                                ),
                                WidgetSpan(
                                  child: Icon(
                                    CupertinoIcons.chevron_forward,
                                    size: 14,
                                    color: HexColor(HexColor.color9999),
                                  ),
                                  alignment: PlaceholderAlignment.middle,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    Container(
                      margin: const EdgeInsets.only(top: 10, bottom: 20),
                      alignment: Alignment.centerLeft,
                      child: Text(
                        '￥6555.00',
                        style: StylesUtils.customTextStyle(
                          color: HexColor.color0000,
                          fontSize: StylesUtils.fontSize36,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        TextButton(
                          onPressed: () {
                            Get.toNamed(Routes.mineWalletRecharge);
                          },
                          style: ButtonStyle(
                            backgroundColor: WidgetStatePropertyAll(
                              HexColor(HexColor.colorFf62),
                            ),
                            foregroundColor: const WidgetStatePropertyAll(
                                Colors.transparent),
                            fixedSize: const WidgetStatePropertyAll(
                              Size(150, 40),
                            ),
                            minimumSize: const WidgetStatePropertyAll(
                              Size(150, 40),
                            ),
                            alignment: Alignment.center,
                            shape: WidgetStatePropertyAll(
                              RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(4),
                              ),
                            ),
                            padding:
                                const WidgetStatePropertyAll(EdgeInsets.zero),
                          ),
                          child: Text(
                            '充值',
                            style: StylesUtils.customTextStyle(),
                          ),
                        ),
                        TextButton(
                          onPressed: () {},
                          style: ButtonStyle(
                            backgroundColor: WidgetStatePropertyAll(
                              HexColor.rgba(255, 98, 98, 0.0980392156862745),
                            ),
                            foregroundColor: const WidgetStatePropertyAll(
                                Colors.transparent),
                            fixedSize: const WidgetStatePropertyAll(
                              Size(150, 40),
                            ),
                            minimumSize: const WidgetStatePropertyAll(
                              Size(150, 40),
                            ),
                            alignment: Alignment.center,
                            shape: WidgetStatePropertyAll(
                              RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(4),
                              ),
                            ),
                            padding:
                                const WidgetStatePropertyAll(EdgeInsets.zero),
                          ),
                          child: Text(
                            '使用余额预定',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.colorFf62,
                            ),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
          PinnedHeaderSliver(
            child: Container(
              height: 44,
              padding: const EdgeInsets.only(left: 15),
              alignment: Alignment.centerLeft,
              color: Colors.white,
              child: Text(
                '收支明细',
                style: StylesUtils.customTextStyle(
                  color: HexColor.color3333,
                  fontSize: StylesUtils.fontSize16,
                ),
              ),
            ),
          ),
          SliverList.list(
            children: [
              for (var i = 0; i < 5; i++)
                Padding(
                  padding: const EdgeInsets.only(left: 15, right: 15, top: 24),
                  child: Stack(
                    children: [
                      Column(
                        children: [
                          Container(
                            height: 24,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '余额充值',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            height: 24,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '2019-06-12 10:44',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.colorCccc,
                                fontSize: StylesUtils.fontSize12,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Positioned(
                        top: 0,
                        right: 0,
                        bottom: 0,
                        child: Center(
                          child: Text(
                            '+2000.00',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.color3333,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              for (var i = 0; i < 5; i++)
                Padding(
                  padding: const EdgeInsets.only(left: 15, right: 15, top: 24),
                  child: Stack(
                    children: [
                      Column(
                        children: [
                          Container(
                            height: 24,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '房费支付',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.color3333,
                              ),
                            ),
                          ),
                          Container(
                            height: 24,
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '2019-06-12 10:44',
                              style: StylesUtils.customTextStyle(
                                color: HexColor.colorCccc,
                                fontSize: StylesUtils.fontSize12,
                              ),
                            ),
                          ),
                        ],
                      ),
                      Positioned(
                        top: 0,
                        right: 0,
                        bottom: 0,
                        child: Center(
                          child: Text(
                            '+2000.00',
                            style: StylesUtils.customTextStyle(
                              color: HexColor.color3333,
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              Container(
                padding: const EdgeInsets.symmetric(vertical: 20),
                alignment: Alignment.center,
                child: Text(
                  '~~已经到底了~~',
                  style: StylesUtils.customTextStyle(
                    fontSize: StylesUtils.fontSize15,
                    color: HexColor.color3333,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
